Содержание

• Объявление скрипта внутри html-файла
• Обращение к скрипту внутри html-файла
• Обращение к скрипту в отдельном файле
• Импорт скрипта как модуля

Объявление скрипта внутри html-файла

Объявляем скрипт, который сам по себе не будет выполнен, так как к нему не было обращения:

<script type="text/javascript">
    function type_in_console(received_text) {
        console.log("Text is: " + received_text)
    }
</script>

Обращение к скрипту внутри html-файла

Поэтому вызываем его отдельно, это можно сделать как внутри этого же скрипта:

<script type="text/javascript">
    function type_in_console(received_text) {
        console.log("Text is: " + received_text)
    }
    type_in_console("мой текст")
</script>

Так и в отдельном скрипте, обратившись к ранее созданному скрипту по его имени:

<script type="text/javascript">
    type_in_console("другой текст")
</script>

Обращение к скрипту в отдельном файле

Скрипт может храниться в отдельном файле, при этом его не требуется оборачивать в теги script. Пример: файл separate_file.js.

function separate_file() {
    console.log("123")
}

Далее нам требуется импортировать этот скрипт в нашем html-файле следующим образом.

Теперь мы можем обратиться к нему по имени файла (без расширения .js):

<script type="text/javascript" src="separate_file.js"></script>

<script type="text/javascript">
    separate_file()
</script>

Название файла и функции в этом файле должны совпадать.

Импорт скрипта как модуля

Функцию также можно экспортировать в отдельный файл и извлекать её как модуль. Файл должен иметь следующую структуру:

export function type_this_text(text) {
    console.log("type me: " + text)
}

Чтобы воспользоваться этой функцией, её надо сначала импортировать. Импорт лучше делать в head, так как в тот момент, когда мы будем обращаться к функции, она должна быть доступна (уже импортирована).

Если такой возможности нет, то импорт стоит сделать в первом исполняемом скрипте.

Другой альтернативой является обращение к функции в самом импорте, тогда она точно будет доступна. Напр.:

<script type="module">
    import { type_this_text } from "static/js/index/type_me.js";
        my_js_modules.type_this_text = type_this_text
        my_js_modules.type_this_text("текст")
</script>

Важно: все импорты мы храним в объекте `my_js_modules`` и обращаемся к модулям через этот объект. Именно поэтому перед импортом нам также потребуется создать этот объект.

<script type="text/javascript">
    const required_js_modules = {};
</script>